*{margin: 0;padding: 0;}
body{
    overflow-x: hidden;
}
.header{
    width: 100%;
    height: 120px;
    background: url("../images/header.jpg") no-repeat;
    background-size: auto 100%;
    background-position: center;
}
.header-title{
    width: 100%;
    height: 40px;
    background-color: #666666;
}
.title{
    width: 1226px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
}
.title-left{
    width: 900px;
    float: left;
    position: relative;
}
.title-left ul{
  position: absolute;
  top: 10px;
}
.title-left li{
    list-style: none;
    float: left;
    margin-right: 5px;
}
.title-left span{
    color: #424242;
}
.title-left a{
    text-decoration-line: none;
    color: white;
    font-size: 12px;
}
.title-left a:hover{
    color: orangered;
}
.title-right{
    width: 300px;
    float: right;
    position: relative;
}
.title-right ul{
  position: absolute;
  top: 10px;
  right: 100px;
}
.title-right li{
    list-style: none;
    float: left;
    margin-right: 10px;
}
.title-right a{
    text-decoration-line: none;
    color: white;
    font-size: 12px;
}
.title-right a:hover{
    color: orangered;
}
.title-right button{
    position: absolute;
    background-color: #434343;
    height: 40px;
    width: 100px;
    right: 0;
    border: none;
}
.title-right button:hover{
    background-color: white;
}
.title-right span{
    color: #424242;
}
/* 大小怎么设置？？？？？ */
.icon-gouwuche{
  font-size: 30px;
}
.up-center{
    width: 1226px;
    height: 550px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
.up-first{
    height: 70px;
    margin-top: 10px;
    position: relative;
}
.first-left{
    width: 250px;
    position: absolute;
    float: left;
}
.first-left img{
    width: 60px;
    height: 60px;
}
.first-mid{
  width: 600px;
  float: left;
  margin-left: 250px;
  position: relative;
}
.first-mid ul{
  position: absolute;
  top: 15px;
}
.first-mid li{
    list-style: none;
    float: left;
    margin-right: 15px;
}
.first-mid a{
    text-decoration-line: none;
    color: black;
}
.first-right{
    width: 376px;
    float: right;
    position: relative;
}
.first-right input{
   width: 250px;
   height: 45px;
   position: absolute;
   top:5px;
   right:55px;
}
.first-right input::placeholder{
    text-indent: 10px;
    outline: none;
}
.first-right button{
  position: absolute;
  width: 60px;
  height: 49px;
  top: 5px;
  right: 0;
}
.swiper{
    width: 1226px;
    height: 46px;
    margin-top: 10px;
}
.swiper-content img{
    position: absolute;
    left: 0;
    top: 0;
 }
 .swiper-content img:nth-child(1){
     width: 1226px;
     height: 460px;
     z-index: 100;
 }
 .swiper-content{
   width: 100%;
   height: 100%;
   position: relative;
 }
 .swiper button{
    width: 40px;
    height: 70px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: url("../images/icon-slides.png");
    border: none;
    outline: none;
    z-index: 101;
 }
 #left{
    left: 0;
    background-position-x: -84px;
    position: absolute;
    left: 595px;
 }
 #right{
     right: 0;
     background-position-x: -126px;
     position: absolute;
     right: 347px;
 }
 #left:hover{
     cursor: pointer;
     background-position-x: 0;
 }
 #right:hover{
     cursor: pointer;
     background-position-x: 125px;
 }
 #btns span{
     display: inline-block;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     margin-right: 5px;
     background-color: gray;
     border: 1px solid #fff;
 }
 
 #btns{
     width: 100%;
     position: absolute;
     z-index: 200;
     top: 670px;
     right: -1320px;
 }
 #btns .current{
     background-color: orangered;
 }
 .swiper-title{
     width: 250px;
     height: 460px;
     opacity: 70%;
     background-color: #463E4E;
     float: left;
     z-index: 201;
     position: absolute;
 }
 .pra{
     width: 250px;
     height: 440px;
     margin-top: 20px;
 }
 .pra-one{
    width: 250px;
    height: 55px;
 }
 .pra-one p{
     width: 200px;
     height: 55px;
     color: white;
     text-align: center;
     float: left;
     margin-top: 18px;
 }
 .pra-one span{
     display: block;
     width: 20px;
     height: 20px;
     color: white;
     float: right;
     margin-right: 20px;
     margin-top: 18px;
 }
 .pra-one:hover{
    background-color: orangered;
    cursor: pointer;
 }
 .pra-two{
    width: 250px;
    height: 55px;
 }
 .pra-two p{
     width: 200px;
     height: 55px;
     color: white;
     text-align: center;
     float: left;
     margin-top: 0px;
 }
 .pra-two span{
     display: block;
     width: 20px;
     height: 20px;
     color: white;
     float: right;
     margin-right: 20px;
     margin-top: 0px;
 }
 .pra-two:hover{
    background-color: orangered;
    cursor: pointer;
 }
 .pra-three{
    width: 250px;
    height: 55px;
 }
 .pra-three p{
     width: 200px;
     height: 55px;
     color: white;
     text-align: center;
     float: left;
     margin-top: 0px;
 }
 .pra-three span{
     display: block;
     width: 20px;
     height: 20px;
     color: white;
     float: right;
     margin-right: 20px;
     margin-top: 0px;
 }
 .pra-three:hover{
    background-color: orangered;
    cursor: pointer;
 }
 .pra-four{
    width: 250px;
    height: 55px;
 }
 .pra-four p{
     width: 200px;
     height: 55px;
     color: white;
     text-align: center;
     float: left;
     margin-top: 0px;
 }
 .pra-four span{
     display: block;
     width: 20px;
     height: 20px;
     color: white;
     float: right;
     margin-right: 20px;
     margin-top: 0px;
 }
 .pra-four:hover{
    background-color: orangered;
    cursor: pointer;
 }
 .pra-fiv{
    width: 250px;
    height: 55px;
 }
 .pra-fiv p{
     width: 200px;
     height: 55px;
     color: white;
     text-align: center;
     float: left;
     margin-top: 0px;
 }
 .pra-fiv span{
     display: block;
     width: 20px;
     height: 20px;
     color: white;
     float: right;
     margin-right: 20px;
     margin-top: 0px;
 }
 .pra-fiv:hover{
    background-color: orangered;
    cursor: pointer;
 }
 .pra-six{
    width: 250px;
    height: 55px;
 }
 .pra-six p{
     width: 200px;
     height: 55px;
     color: white;
     text-align: center;
     float: left;
     margin-top: 0px;
 }
 .pra-six span{
     display: block;
     width: 20px;
     height: 20px;
     color: white;
     float: right;
     margin-right: 20px;
     margin-top: 0px;
 }
 .pra-six:hover{
    background-color: orangered;
    cursor: pointer;
 }
 .pra-seven{
    width: 250px;
    height: 55px;
 }
 .pra-seven p{
     width: 200px;
     height: 55px;
     color: white;
     text-align: center;
     float: left;
     margin-top: 0px;
 }
 .pra-seven span{
     display: block;
     width: 20px;
     height: 20px;
     color: white;
     float: right;
     margin-right: 20px;
     margin-top: 0px;
 }
 .pra-seven:hover{
    background-color: orangered;
    cursor: pointer;
 }
 .pra-eight{
    width: 250px;
    height: 55px;
 }
 .pra-eight p{
     width: 200px;
     height: 55px;
     color: white;
     text-align: center;
     float: left;
     margin-top: 0px;
 }
 .pra-eight span{
     display: block;
     width: 20px;
     height: 20px;
     color: white;
     float: right;
     margin-right: 20px;
     margin-top: 0px;
 }
 .pra-eight:hover{
    background-color: orangered;
    cursor: pointer;
 }
 .color-content{
     width: 1226px;
     height: 170px;
     margin-top:10px;
     margin-left: auto;
     margin-right: auto;
     position: relative;
     overflow: hidden;
 }
 .content-one{
     width: 248px;
     height: 153px;
     float: left;
     position: absolute;
     left: 0;
     overflow: hidden;
     background-color: #5F5750;
 }
 .content-two{
    width: 280px;
    height: 170px;
    background-color: yellow;
    float: left;
    background: url("../images/黄色.jpg") no-repeat;
    background-size: 100% auto;
    position: absolute;
    left:290px;
    transition: all 0.5s;
}
.content-two:hover{
    cursor: pointer;
    transform: scale(1.1);
}
.content-three{
    width: 280px;
    height: 170px;
    background-color: yellow;
    float: left;
    position: absolute;
    left: 620px;
    background: url("../images/绿色.jpg") no-repeat;
    background-size: 100% auto;
    transition: all 0.5s;
}
.content-three:hover{
    cursor: pointer;
    transform: scale(1.1);
}
.content-four{
    width: 280px;
    height: 170px;
    background-color: yellow;
    float: left;
    position: absolute;
    right: 0;
    background: url("../images/蓝色.jpg") no-repeat;
    background-size: 100% auto;
    transition: all 0.5s;
}
.content-four:hover{
    cursor: pointer;
    transform: scale(1.1);
}
.center{
    width: 100%;
    height: 1800px;
    background-color: #f5f5f5;
    margin-top: 20px;
}
.content-one i{
    color: #919799;
    font-size: 24px;
}
.content-one i:hover{
    color: white;
    cursor: pointer;
}
.content-one p{
    color: #919799;
}
.content-one p:hover{
    color: white;
    cursor: pointer;
}
.icon-one{
    width: 80px;
    height: 75px;
    margin-right: 2px;
    float: left;
    text-align: center;
}
.one{
    margin-top: 15px;
}
.icon-two{
    width: 80px;
    height: 75px;
    margin-right: 2px;
    float: left;
    text-align: center;
}
.icon-three{
    width: 80px;
    height:75px;
    text-align: center;
    margin-right: 2px;
    float: left;
}
.icon-four{
    width: 80px;
    height: 75px;
    text-align: center;
    margin-right: 2px;
    float: left;
    margin-top: 2px;
}
.icon-fiv{
    width: 80px;
    height: 75px;
    text-align: center;
    margin-right: 2px;
    float: left;
    margin-top: 2px;
}
.icon-six{
    width: 80px;
    height: 75px;
    text-align: center;
    margin-right: 2px;
    float: left;
    margin-top: 2px;
} 
.center-content{
    width: 1226px;
    height: 1000px;
    margin-left: auto;
    margin-right: auto;
    /* background-color: red; */
}
.center-title{
    width: 1226px;
    height: 40px;
    float: left;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
}
.center-title .left{
  position: absolute;
  width: 100px;
  left: 0;
  float: left;
}
.center-title .left p{
    margin-top: 5px;
    font-size: 20px;
}
.center-title .right{
    position: absolute;
    width: 400px;
    right: 0;
    float: right;
    position: relative;
}
.center-title .right span{
    display: inline-block;
    width: 40px;
    height: 20px;
    border: 1px solid #333;
    text-align: center;
}
.center-title .right>div{
  position: absolute;
  top: 8px;
  right: 12px;
}
.miaoShao{
    width: 1226px;
    height: 339px;
    overflow: hidden;
}
.miaoShao>div{
    width: 234px;
    height: 339px;
    float: left;
    margin-right: 11.2px;
}
.miaoShao-one{
    background: url("../images/闪电.png");
}
.miaoShao-two{
    background: url("../images/001.png");
}
.miaoShao-three{
    background: url("../images/002.png");
}
.miaoShao-four{
    background: url("../images/003.png");
}
.miaoShao-five{
    background: url("../images/004.png");
}
.advertise{
    height: 120px;
    margin-top: 20px;
    background: url("../images/小米10至尊纪念版.webp");
}
.phone-title{
    margin-top: 40px;
    height: 40px;  
    overflow: hidden; 
}
.phone-title .left{
    float: left;
    width: 100px;
}
.phone-title .left p{
    font-size: 25px;
}
.phone-title .right{
    width: 100px;
    float: right;
}
.phone-title .right a{
    text-decoration-line: none;
    color: black;
}
.phone-title .right a:hover{
    cursor: pointer;
    color: orange;
}
.goods{
    width: 1226px;
    height: 614px;
    overflow: hidden;
}
.goods .left{
    width: 234px;
    height: 614px;
    background: url("../images/小米Alpha.webp");
    float: left;
    transition: all 0.5s;
}
.goods .left:hover{
    cursor: pointer;
    transform: scale(1.1);
}
.goods .right{
    width: 992px;
    height: 614px;
    float: left;
}
.goods .right div{
    width:234px;
    height: 300px;
    background-color: white;
    margin-left: 13px;
    float: left;
}
.goods .right img{
    display: block;
    margin-left: 17px;
    transition: all 0.5s;
}
.goods .right img:hover{
    transform: scale(1.1);
}
.goods .right p{
    text-align: center;
    margin-top: 10px;
}
.name{
    font-size: 14px;
}
.camera{
    font-size: 12px;
}
.price{
    color: orange;
}
.low-price{
    color:gray;
    text-decoration-line: line-through;
}
.right-five{
  margin-top: 15px;
}
.right-six{
    margin-top: 15px;
}
.right-seven{
    margin-top: 15px;
}
.right-eight{
    margin-top: 15px;
}
.redmi-x{
    margin-top: 30px;
}
.video-title{
    width: 1226px;
    margin-top: 20px;
    height: 40px;  
    overflow: hidden; 
}
.video-title .left{
    float: left;
    width: 100px;
}
.video-title .left p{
    font-size: 25px;
}
.video-title .right{
    width: 100px;
    float: right;
}
.video-title .right a{
    text-decoration-line: none;
    color: black;
}
.video-title .right a:hover{
    cursor: pointer;
    color: orange;
}
.video{
    width: 1226px;
    height: 350px;
}
.video-center div{
    width: 300px;
    height: 300px;
    float: left;
    margin-right: 6px;
    background-color: white;
    transition: all 0.5s;
}
.video-center div:hover{
    transform: scale(1.1);
}
.video-center img{
    width: 300px;
    height: 200px;
    position: relative;
}
.video-center i{
    color: white;
    font-size: 24px;
    z-index: 10;
    position: absolute;
    left: 20px;
    top: 160px;
}
.video-center i:hover{
    color: orangered;
}
.video-center p{
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}
.video-center div:nth-last-child(){
    margin-right: 0;
}
.footer-text{
    width: 1226px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
}
.text-top{
    width: 1226px;
    height: 80px;
    border-bottom: 1px solid gray;
    overflow: hidden;
    position: relative;
}
.text-top ul{
 position: absolute;
 top: 25px;
 left: 40px;
}
.text-top li{
  list-style: none;
  float: left;
  margin-right: 50px;
  text-align: center;

}
.text-top span{
    display: inline-block;
    height: 40px;
    font-size: 30px;
    color: gray;
}
.text-top i{
    font-size: 30px;
}
.text-top a{
 text-decoration-line: none;
 color: black;
}
.text-top a:hover{
    color: orangered;
}
.text-down{
    width: 1226px;
    height: 300px;
    position: relative;
}
.down-left{
    width: 920px;
    height: 300px;
    float: left;
}
.down-left div{
    width: 153px;
    height: 300px;
    float: left;
    position: relative;
}
.down-left ul{
   position: absolute;
   top: 30px;
}
.down-left p{
    font-size: medium;
}
.down-left li{
    list-style: none;
    margin-top: 10px;
}
.down-left li:first-child{
    margin-bottom: 30px;
}
.down-left a{
    text-decoration-line: none;
    font-size: small;
    color: #919799;
}
.down-left a:hover{
    cursor: pointer;
    color: orangered;
}
.down-mid{
  position: absolute;
  width: 1px;
  height: 150px;
  float: left;
  background-color: black;
  top: 50px;
  left: 921px;
}
.down-right{
    float: left;
    width: 300px;
    height: 300px;
    position: relative;
}
.down-right ul{
  position: absolute;
  top: 35px;
  left: 50px;
}
.down-right li{
  list-style: none;
  margin-top: 10px;
}
.down-right li:nth-child(1){
    color: orangered;
    font-size: larger;
}
.down-right li:nth-child(3){
    width: 120px;
    text-align: center;
    color: orangered;
    border: 1px solid orangered;
    font-size: 14px;
}
.down-right li:nth-child(3) i{
    font-size: 14px;
}
.down-right li:nth-child(3):hover{
    cursor: pointer;
    background-color: orange;
    color: white;
}
.down-right a{
    text-decoration-line: none;
    color: gray;
}
.down-right a:hover{
    color: orangered;
}
.down-right i{
    display: inline-block;
    margin-right: 10px;
    font-size: 20px;
}
.footer{
   width: 100%;
   height: 200px;
   background-color: #FAFAFA; 
}
.footer-center{
    width: 1226px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
}
.footer-left{
  width: 80px;
  height: 300px;
  float: left;
  margin-top: 10px;
}
.footer-left img{
    width: 60px;
    height: 60px;
}
.footer-right{
    width: 1100px;
    height: 200px;
    float: left;
    margin-top: 10px;
}
.right-one{
    width: 1050px;
    height: 20px;
}
.right-one li{
    list-style: none;
    float: left;
    margin-right: 5px;
}
.right-one a{
    text-decoration-line: none;
    color: gray;
    font-size: 10px;
}
.right-one a:hover{
    cursor: pointer;
    color: orangered;
}
.right-two{
    width: 1050px;
    height: 100px;
}
.right-two p{
    width: 1050px;
    height: 24px;
    font-size: 14px;
    color: #919799;
}
.right-three{
    width: 1050px;
    height: 40px;
    overflow: hidden;
}
.right-three div{
    width: 80px;
    height: 40px;
    float: left;
}
.right-three div:nth-child(4){
    width: 43px;
}
.right-three div:nth-child(6){
    width: 43px;
}
.right-three i{
    font-size: 40px;
}
.right-three p{
    width: 70px;
    height: 20px;
}
.end{
    width: 1226px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.end p{
    color: #919799;
    position: absolute;
    top: 10px;
    left: 350px;
    font-size: 25px;
}
.tools{
    width: 80px;
    height: 400px;
    position: fixed;
    right: 0;
    bottom: 150px;
    background-color: white;
}
.tools div{
    width: 80px;
    height: 80px;
    border: 1px solid #919799;
    text-align: center;
}
.roll-top{
    width: 80px;
    height: 80px;
    position: fixed;
    right: 0;
    bottom: 30px;
    background-color: white;
    border: 1px solid #919799;
    text-align: center;
}
.tools a{
    text-decoration-line: none;
    color: #919799;
    font-size: 16px;
}
.tools a:hover{
    cursor: pointer;
    color: orangered;
}
.tools i{
    display: inline-block;
    font-size: 35px;
    margin-top: 15px;
}
.roll-top a{
    text-decoration-line: none;
    color: #919799;
    font-size: 16px;
}
.roll-top a:hover{
    cursor: pointer;
    color: orangered;
}
.roll-top i{
    display: inline-block;
    font-size: 35px;
    margin-top: 15px;
}